<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        /* 本例演示如何设置轮廓的样式。 */
        p {
            border: 1px solid red;
        }

        p.dotted {
            outline-style: dotted;
        }

        p.dashed {
            outline-style: dashed;
        }

        p.solid {
            outline-style: solid;
        }

        p.double {
            outline-style: double;
        }

        p.groove {
            outline-style: groove;
        }

        p.ridge {
            outline-style: ridge;
        }

        p.inset {
            outline-style: inset;
        }

        p.outset {
            outline-style: outset;
        }
    </style>
</head>

<body>

    <p class="dotted">点线轮廓</p>
    <p class="dashed">虚线轮廓</p>
    <p class="solid">实线轮廓</p>
    <p class="double">双线轮廓</p>
    <p class="groove">凹槽轮廓</p>
    <p class="ridge">垄状轮廓</p>
    <p class="inset">嵌入轮廓</p>
    <p class="outset">外凸轮廓</p>
    <p><b>注意:</b> 如果只有一个 !DOCTYPE 指定 IE 8 支持 outline 属性。</p>
</body>

</html>